<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>返点策略</title>
<link href="/res/back/css/base.css" rel="stylesheet" type="text/css" />
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/res/third/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />

<style type="text/css">
    .maintable{width: 100%;font-size: 14px;border-bottom: 1px solid #ddd;}
    .maintable2,.maintable3{width: 100%;font-size: 14px;}
    .maintable tr{height: 48px;}
    .maintable2 tr{height: 72px;border-bottom: 1px solid #ddd;}
    .maintable3 tr{height: 72px;border-bottom: 1px solid #ddd;}
    .firstp1{letter-spacing: 3px;}
    .firstp2{border-radius:inherit;width: 30px;height: 32px;line-height: 29px;cursor: inherit;}
    .tp{margin: 0px 10px;width: 88px;height: 33px;border: 1px solid #ddd;}
    .fdcl,.dqcl{border-radius:inherit;margin-left: 12px;width: 80px;height: 32px;line-height: 29px;}
    .whiteback{background-color: #fff;color: #5bc0de;}
</style>
</head>
<body>
<div id="app">
	   <div class="panel panel-info">
	        <div class="panel-heading">
	          <h3 class="panel-title">返点设置</h3>
	        </div>
        <div class="panel-body" style="border-bottom: none;padding: 15px;">
			 <table  class="maintable">
			 		<tr>
			 			<td colspan="2">供应商名称：${member.companyName!}</td>
			 		</tr>
			 		<tr>
			 			<td>签约日期：${(member.signintime?string("yyyy-MM-dd"))!}</td>
			 			<td>结束日期：${(member.endtime?string("yyyy-MM-dd"))!}</td>
			 		</tr>
			 		<tr>
			 			<td>联系人：${member.contacts!}</td>
			 			<td>联系电话：${member.phone!}</td>
			 		</tr>
			 </table>
			 <div style="margin-top: 20px;border-bottom: 1px solid #5BC0DE;">
			 	  <span class="btn btn-info btn-xs delbtn fdcl">返点策略</span>
			 </div>
			 <div id="fd_div">
				 <table  class="maintable2">
				 		<tr>
				 			<th style="text-align: center;" width="30%">销售金额</th>
				 			<th style="text-align: center;" width="20%">返点比例</th>
				 			<th style="text-align: center;" width="25%">需返点金额</th>
                            <th style="text-align: center;" width="25%">操作</th>
				 		</tr>

                     <tr class="bpnode" v-for="(data, index) in list">
                         <td align="center">第<b class="showjd">{{ index + 1 }}</b>阶段：<input class="tp" type="number" name="minNum" v-model="data.maxNum"><span class="firstp1">元及以下</span></td>
                         <td align="center">返点比例：<input name="pointPercent" class="tp" type="number" v-model="data.pointPercent"><span class="btn btn-info btn-xs delbtn firstp2">%</span></td>
                         <td align="center"><span class="moneynum">{{ calcMoney(data, index) }}</span>元</td>
                         <td align="center">
                            [#if canEdit]
                             <span v-if="index > 0" style="width: 80px;height: 32px;line-height: 29px;" class="btn btn-info btn-xs delbtn" v-on:click="list.splice(index, 1)">删除</span>
                            [/#if]
                         </td>
                     </tr>

				 </table>
				
				 <div style="margin-top: 20px;">
				 	  [#if canEdit]
                          <span style="margin-left: 12px;width: 80px;height: 32px;line-height: 29px;" class="btn btn-info btn-xs delbtn" v-on:click="list.push({})">+返点阶段</span>
                          <span style="margin-left: 12px;width: 80px;height: 32px;line-height: 29px;" class="btn btn-info btn-xs delbtn" onclick="saveBackPoint()">保存</span>
				 	  [/#if]
				 </div>
			 </div>
        </div>
      </div>
</div>
      
<script style="display: none;" id="trmoban" type="text/html" >
    <tr class="bpnode">
        <td align="center">第<b class="showjd">1</b>阶段：<input class="tp" type="number" name="minNum"><span class="firstp1">元及以下</span>
        <td align="center">返点比例：<input name="pointPercent" class="tp" type="number"><span class="btn btn-info btn-xs delbtn firstp2">%</span></td>
        <td align="center"><span class="moneynum"></span>元</td>
    </tr>
</script>

<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="/res/third/powerFloat/js/mini/jquery-powerFloat-min.js" type="text/javascript"></script>
<script src="/res/common/js/util.js"></script>
<script src="/res/common/js/vue.js"></script>
<script type="text/javascript">
    $(function () {
        var app = new Vue({
            el: '#app',
            data: {
                list: []
            },
            mounted: function () {
                $.ajax({
                    url : '/member/getBackPoint.do',
                    type : 'post',
                    dataType : 'json',
                    data : {mid : '${member.id!}'},
                    success : function(res) {
                        if (res && res.success) {
                            if(res.obj) {
                                if(res.obj.length == 0) {
                                    app.list.push({});
                                } else {
                                    app.list = res.obj;
                                }
                            }
                        }
                    }
                })
            },
            methods : {
                //计算需返点金额
                calcMoney : function(data, index) {
                    var money = data.maxNum ? mul(sub(data.maxNum, index == 0 ? 0 : this.list[index - 1].maxNum), data.pointPercent / 100) : '0';
                    return money ? money : '0';
                }
            }
        });
    }); 

    var jdhtml;
    var jdnum;
    var cenMemberId='${member.id!}';

    $(function() {
        //jdhtml=$(".maintable2").html();
        jdhtml=$("#trmoban").html();
        //alert(jdhtml);
        jdnum=parseInt($(".showjd:last").text());
        bindshwomoney();
        $("[name='minNum'],[name='pointPercent']").blur();

    })
    function addBackPoint(){
        $(".maintable2").append(jdhtml);
        jdnum=jdnum+1;
        $(".maintable2 tr:last").find(".showjd").text(jdnum);
        $("[name='minNum'],[name='pointPercent']").blur();
        //bindshwomoney();
    }
    function bindshwomoney(){
// 	$("[name='minNum'],[name='pointPercent']").unbind("focusout");
        $("body").on("blur","[name='minNum'],[name='pointPercent']",function(){
            var mon;
            var point;
            if($(this).attr("name")=="minNum"){
                mon=$(this).val().trim();
                point=$(this).parents(".bpnode").find("[name='pointPercent']").val().trim();
            }else{
                mon=$(this).parents(".bpnode").find("[name='minNum']").val().trim();
                point=$(this).val().trim();
            }
            if(mon!=''&&point!=''){
                var ind=parseInt($(this).parents(".bpnode").find(".showjd").text());
                if(ind==1){
                    $(this).parents(".bpnode").find(".moneynum").text(mul(parseFloat(mon), div(parseFloat(point), 100), 2));
                }else{
                    var nod=$(this).parents(".bpnode").prev().find("[name='minNum']").val().trim();
                    if(nod!=""){
                        $(this).parents(".bpnode").find(".moneynum").text(mul(sub(parseFloat(mon), parseFloat(nod)), div(parseFloat(point), 100), 2));
                    }
                    $(this).parents(".bpnode").next().find("[name='minNum']").blur();
                }
            }
        })
    }
    function saveBackPoint(){
        var memberdetailarr={};
        var memberDetails=[];
        //var MemberDetail={};
        var z=/^([1-9]\d*|0)(\.\d{1,2})?$/;
        var z1 = /^([1-9]\d*|0)(\.\d{1,6})?$/;
        var isvali=true;
        $(".maintable2 input").each(function() {
            if($(this).prop('name') == 'minNum') {
                //销售金额
                if(!z.test($(this).val().trim())){
                    alert("销售金额格式不正确");
                    isvali=false;
                    return false;
                }
            } else {
                //返点比例
                if(!z1.test($(this).val().trim())){
                    alert("返点比例格式不正确");
                    isvali=false;
                    return false;
                }
            }
        })
        $("[name='minNum']").each(function(index){
            var th=$(this).val();
            var ne=$($("[name='minNum']")[index+1]).val();
            if(parseInt(th)>=parseInt(ne)){
                alert("销售金额后者须大于前者");
                isvali=false;
                return false;
            }
        })
        if(!isvali){
            return false;
        }
        var len=$(".maintable2 .bpnode").length;
        $(".maintable2 .bpnode").each(function(ind){
            var stage=$(this).find(".showjd").text().trim();
            /*var minNum=$(this).find("[name='minNum']").val().trim();
            if(len!=1 && (ind+1)!=len){
                var maxNum=$($(".maintable2 .bpnode")[ind+1]).find("[name='minNum']").val().trim();
            }*/
            var pointPercent=$(this).find("[name='pointPercent']").val().trim();

			////////////
			var val = $.trim($(this).find('input[name=minNum]').val());
			var min;
			var max;
			if(ind == 0) {
				min = 0;
				max = val;
			} else {
				min = $.trim($($(".maintable2 .bpnode")[ind-1]).find("[name='minNum']").val());
				max = val;
			}

            var MemberDetail={};
            MemberDetail.stage=stage;
            MemberDetail.minNum=min;
            MemberDetail.maxNum=max;
            MemberDetail.pointPercent=pointPercent;
            MemberDetail.cenMemberId=cenMemberId;
            memberDetails.push(MemberDetail);
        });
        memberdetailarr.memberDetails=memberDetails;
        art.dialog.post({
            type : "post",
            dataType : "json",
            contentType : "application/json; charset=utf-8",
            url : "/member/saveBackPoint.do",
            data : JSON.stringify(memberdetailarr),
            success : function(data) {
                alert(data.msg);
                if(data.success){
                    location.reload();
                }
            }

        },"数据正在提交.... ");
    }

    function showfdcl(node){
        $(node).removeClass("whiteback");
        $(node).next().addClass("whiteback");
        $("#fd_div").show();
        $("#dq_div").hide();
    }
    function showdqcl(node){
        $(node).removeClass("whiteback");
        $(node).prev().addClass("whiteback");
        $("#fd_div").hide();
        $("#dq_div").show();
        art.dialog.post({
            url : '/member/selectMemberDet.do',
            type : 'post',
            dataType : 'json',
            data : {
                mid : cenMemberId
            },
            beforeSend:function(){
                art.dialog.tips("处理中...");
            },
            success : function(data){
                if(data.success){
                    $("#ftr").nextAll().remove();
                    var mdlist=data.attributes.mdlist;
                    if(mdlist.length==0){
                        $(".maintable3").append("<tr>"
                                +"<td colspan='4'>暂无策略</td>"
                                +"</tr>");
                    }else{
                        for (var i = 0; i < mdlist.length; i++) {
                            $(".maintable3").append("<tr>"
                                    +"<td>第"+mdlist[i].stage+"阶段</td>"
                                    +"<td>"+mdlist[i].minNum+"</td>"
                                    +"<td>"+mdlist[i].maxNum+"</td>"
                                    +"<td>"+mdlist[i].pointPercent+"</td>"
                                    +"</tr>");

                        }
                    }
                }else{
                    error_msg(data.msg , function(){location.reload();});
                }
            }

        },"数据初始化中.... ");
    }
</script>
</body>
</html>

